<template>
  <div class="about">
    <p>num1: {{num1}}</p>
    <p>num2: {{num2}}</p>
    <div>
      <button @click="increment">increment</button>
      <button @click="stopwatch">stopwatch</button>
    </div>
    <DomRef></DomRef>
  </div>
</template>
<script>
  import { reactive,watch,computed,toRefs,watchEffect } from 'vue'
  import DomRef from '../components/DomRef.vue'
  export default{
    components: {DomRef},
    setup(){
      
      const state = reactive({
        num1: 1,
        num2: computed(()=> state.num1 * 2 )
      })
      // 如果响应性的属性有变更，就会触发这个函数,但他是惰性的
      watchEffect(()=>{
        console.log(`effect 触发了 ${state.num1}`)
      })
      
      // 定义一个监听器
      const stop = watch(state,(val,oldVal)=>{
        console.log(`watch:  ${oldVal.num2}`)
      })
      
      //数值增加方法
      const increment = ()=> state.num1++;
      
      const stopwatch = ()=> stop();
      
      return{
        ...toRefs(state),
        stopwatch,
        increment
      }
    }
  }
</script>
